<script setup>
  import { ref } from 'vue'
  import { useCommonStore } from '@/store/index'

  const popup = ref(null)

  const commonStore = useCommonStore()

  function open() {
    popup.value.open()
  }

  const classOptions = ref({
    limitMoveNum: 1,
    direction: 2,
    step: 0.3
  })
  defineExpose({ open })
</script>

<template>
  <Popup width="1335" height="780" ref="popup" title="品种培育事迹">
    <div class="flex">
      <div v-html="commonStore.data[13]?.content" class="video"></div>
      <!-- <video v-cover="commonStore.data[13]?.content" class="video" controls></video> -->
      <div class="content" v-html="commonStore.data[14]?.content"></div>
    </div>
    <vue3ScrollSeamless
      :dataList="commonStore.data[15]?.content.split(',')"
      :classOptions="classOptions"
      class="bottom"
    >
      <div class="flex">
        <div
          class="item"
          v-for="item in commonStore.data[15]?.content.split(',')"
        >
          <img v-cover="item" alt="" />
        </div>
      </div>
    </vue3ScrollSeamless>
  </Popup>
</template>

<style lang="scss" scoped>
  .video {
    width: 650px;
    height: 380px;
    background: #294557;
  }

  .video ::v-deep(video) {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
  }

  .content {
    margin-left: 48px;
    width: 522px;
    height: 380px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 25px;
    overflow: scroll;
  }

  .bottom {
    margin-top: 44px;
    width: 1225px;
    height: 182px;
    background: #092435;
    box-shadow: inset 0px 0px 16px 0px rgba(45, 230, 255, 0.56);
    border-radius: 0px 0px 0px 0px;
    border: 2px solid rgba(6, 165, 255, 0.5);
    overflow: hidden;

    .item {
      margin: 20px;
      width: 226px;
      height: 138px;

      img {
        width: 100%;
        height: 100%;
        object-fit: scale-down;
      }
    }
  }
</style>
